-
-
Notifications
You must be signed in to change notification settings - Fork 718
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature: Global Timeline #2265
Feature: Global Timeline #2265
Conversation
added new timeline page to sidebar reformatted the recipe timeline added vertical option to recipe card mobile
fixed infinite scroll on dialog fixed hasMore var not resetting during instantiation
You have successfully added a new Trivy configuration |
added test for fetching by slug/id
My only suggestion with this is maybe move the timeline button below the shopping lists. The reason for this is that shopping lists will probably be used more frequently. Other than that, I like it! |
I think that's a good suggestion, I'll move it. I put it under the meal planner because it "relates" to the planner more, but I think your point that the shopping list is more frequently used is more significant |
What type of PR is this?
(REQUIRED)
What this PR does / why we need it:
(REQUIRED)
This adds a brand new "global" page to Mealie that features the entire group's timeline events. It re-uses the recipe-specific timeline view, but expands the functionality to include recipe cards (so you can see which recipe the event is for). It also fixes tons of little formatting issues with the existing timeline, particularly for mobile users.
In addition to the new page, many of the recipe timeline event components were abstracted into sub components to make everything more reusable. I also needed to extend the query filter API to understand related table properties (more on that below).
Global Timeline
The Global Timeline is the main focus of this PR. It adds a new shiny menu button:
Which brings you here:
Or, on mobile:
A few things to point out here:
Since recipes need to be loaded to display the recipe card, we can't just load all of the events at once like we could on the individual recipe page. To fix this, I implemented infinite scrolling/pagination:
I have a local cache for recipes so they're only fetched once (rather than once per event). When we eventually implement a "light" recipe API we can speed this up by using that instead.
On mobile:
You'll also notice there's a button to switch the event direction (oldest to newest vs newest to oldest). This is cached in local storage so it's remembered between sessions.
All of the enhancements to the timeline were applied to the timeline components, so individual recipe timelines see these changes too (but recipes are disabled):
Query Filter API
For this to work, I needed to be able to fetch all timeline events for a particular group. We don't store the group on the timeline event, we only have the user (which belongs to a group). I modified the events API to not require a recipe when querying (but it's still required for creating them), and added support for related fields on the query API.
So, for instance, this is the
queryFilter
for the global timeline:recipe.group_id="${groupId}"
And for an individual recipe, we don't need the
recipeId
prop anymore:recipe.slug="${props.slug}"
Recipe API
Since the event only stores the recipe id, and I need to fetch the recipe to display the recipe card, I needed a way to fetch a recipe by its id. I feel like we've needed this a few times before but always worked around it.
I added a simple check to the "get recipe" API that checks if the provided value is a valid UUID, and if it is, look for the recipe by id instead of by slug. So now you can supply either the slug or the id and the API will figure it out.
Miscellaneous Visual Improvements
Since this touched a lot of components, I made some revisions on how certain components render. Here is a summary of those:
Which issue(s) this PR fixes:
(REQUIRED)
N/A
Special notes for your reviewer:
(fill-in or delete this section)
I know a more modular infinite scroll is being worked on, so whenever that's completed we can probably swap out the one I built here. It's more-or-less the same as the existing recipe one, just tweaked to work with timeline events.
I had to do some fun DOM stuff to get the scroll events to register properly (the v-card
intersect
method used with the recipe infinite scroll wasn't working like 80% of the time for some reason). It looks a little gross but it works super consistently (I also saw a ton of variations on the same premise on multiple stack overflow posts, which is where the idea came from).Testing
(fill-in or delete this section)
Updated pytest with the API changes and added a new test for the new nested filter functionality. For the frontend I tested it to death locally (standard and mobile layouts).
Release Notes
(REQUIRED)